<template>
  <s-layout
    tabbar="/pages/index/user"
    navbar="inner"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
    :onShareAppMessage="state.shareInfo"
  >
    <!--    <s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">-->
    <!--      <s-block-item :type="item.type" :data="item.data" :styles="item.style" />-->
    <!--    </s-block>-->
    <view class="user-wrapper">
      <view class="setting" v-if="userInfo.mobile">
        <div></div>
        <!--        <image class="activity-left-image" src="/static/scan.png" />-->
        <image @tap="showDrawer" class="activity-left-image" src="/static/setting.png" />
      </view>
      <view v-else style="height:35rpx"></view>
      <view class="avatar-wrapper">
        <image class="avatar"
               @tap="sheep.$router.go('/pages/user/info')"
               :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
            ">
        </image>
        <view class="avatar-right">
          <view class="user-name" @tap="handleLogin">{{ userInfo.mobile || nickname }}</view>
          <view v-if="userInfo.identity_no" class="user-code">居民编号:{{ userInfo.identity_no }}
            <image class="copy" src="/static/copy.png" @tap="onCopy" />
          </view>
          <view class="user-prompt" v-else-if="userInfo.mobile">未激活居民身份</view>
        </view>
      </view>
      <view class="tips" v-if="userInfo.mobile">{{ userInfo.bio ? userInfo.bio : '什么都没有，可能是神秘外星人~' }}
      </view>
      <view class="fans-wrapper">
        <view>
          <view class="left" v-if="userInfo.mobile">
            <view class="left-item">
              <view>0</view>
              <view>粉丝</view>
            </view>
            <view class="left-item">
              <view>￥{{userInfo.money||0}}</view>
              <view>余额</view>
            </view>
          </view>
        </view>
        <view class="right">
          <view class="edit" v-if="userInfo.mobile" @tap="sheep.$router.go('/pages/user/info')">编辑资料</view>
          <view v-if="userInfo.is_verify_identity == 1" class="share">
            <image class="share-img" @tap="onShareGoods" src="/static/share.png" />
          </view>
        </view>
      </view>
    </view>
    <open-vip></open-vip>
    <view class="queue-wrapper">
      <view class="header-wrapper">
        <view class="title">购物排队</view>
        <view v-if="false" class="more" @tap="handleAll">全部排队
          <my-right></my-right>
        </view>
      </view>
      <view v-show="true" class="queue-empty-wrapper">
        <view class="queue-empty">
          <view class="queue-empty-tips">您还未参与购车</view>
          <!-- <my-btn blue>去购车</my-btn> -->
        </view>
      </view>
      <view v-if="false" class="queue-item-wrapper">
        <view class="queue-item">
          <image class="item-img" src="/static/img/home-icon-8.png" />
          <view class="item-right">
            <view class="content-left">
              <view class="title">红旗E001
              </view>
              <view class="color">绿色
              </view>
              <view class="code-wrapper">购车编号：
                <view class="code">2401025893</view>
              </view>
            </view>
            <view class="content-right">
              <view class="count-wrapper">
                <view class="num">9</view>
                位车主
              </view>
              <view class="wait">还需等待</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--    <view class="monney-wrapper">-->
    <!--      <view class="monney-left" @tap="sheep.$router.go('/pages/user/wallet/money')">-->
    <!--        <image mode="widthFix" class="monney-img" src="/static/wallet.png" />-->
    <!--        <view class="monney-content">-->
    <!--          <view class="monney-title">我的钱包-->
    <!--          </view>-->
    <!--          <view class="monney-subtitle">-->
    <!--            查看我的钱包-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="monney-right" @tap="sheep.$router.go('/pages/user/property/index')">-->
    <!--        <image mode="widthFix" class="monney-img" src="/static/asset.png" />-->
    <!--        <view class="monney-content">-->
    <!--          <view class="monney-title">我的资产-->
    <!--          </view>-->
    <!--          <view class="monney-subtitle">-->
    <!--            查看我的资产-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="collect">
      <view class="collect-title">
        我的藏品：0
      </view>
      <view v-show="true" class="collect-empty">
        <s-empty
          icon="/static/comment-empty.png"
          text="您还没有藏品呦"
        ></s-empty>
        <!--  <view class="btn-wrapper">
             <my-btn blue>去逛逛</my-btn>
           </view> -->
      </view>
      <view v-if="false" class="collect-list">
        <view class="collect-item" v-for="(item,index) in 8">
          <image mode="widthFix" class="collect-img" src="/static/img/home-icon-8.png" />
          <view class="collect-tag blue">孵化中</view>
          <view class="collect-content">
            <view class="collect-item-title">米其林汽车轮胎</view>
            <view class="sub-title">
              <image class="sub-img" src="/static/img/home-icon-8.png" />
              米其林汽车轮胎
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-drawer :width="300" is-full ref="showLeft" mode="left" :mask-click="true">
      <scroll-view class="drawer-wrapper" style="height: 100%;" scroll-y="true">
        <view class="avatar-wrapper" v-if="userInfo.mobile">
          <image class="avatar"
                 :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
            ">
          </image>
          <view class="avatar-right">
            <view class="user-name">{{ userInfo.mobile || nickname }}</view>
            <view class="user-code" v-if="userInfo.identity_no">居民编号:{{ userInfo.identity_no }}
            </view>
          </view>
        </view>
        <view class="list-wrapper">
          <view class="list">
            <view class="list-item" v-for="(item,index) in listData" :key="index" @tap="handleitem(item)">
              <view class="title">{{ item.title }}</view>
              <view class="right icon-button icon-button-right ">
                <my-right></my-right>
              </view>
            </view>
            <view class="list-item">
              <view class="title">缓存</view>
              <view class="right icon-button icon-button-right " v-html="storageSize">
              </view>
            </view>
            <view class="list-item">
              <view class="title">当前版本</view>
              <view class="right icon-button icon-button-right ">
                {{ appInfo.version }}
              </view>
            </view>
          </view>
        </view>
        <!--        <view class="btn-wrapper">-->
        <!--          <view class="btn" @tap="sheep.$router.go('/pages/user/switch-accounts')">切换账号</view>-->
        <!--        </view>-->
        <view class="btn-wrapper" @tap="onLogout">
          <view class="btn">退出</view>
        </view>
      </scroll-view>
    </uni-drawer>
  </s-layout>
</template>

<script setup>
  import { computed, nextTick, reactive, ref } from 'vue';
  import { onPageScroll, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { closeAuthModal, showShareModal } from '@/sheep/hooks/useModal';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import openVip from '@/pages/components/open-vip.vue';
  import MyRight from '@/pages/components/my-right.vue';
  import $share from '@/sheep/platform/share';
  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const appInfo = computed(() => sheep.$store('app').info);
  const nickname = '请先登录';
  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);
  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);
  const onCopy = () => {
    sheep.$helper.copyText('复制内容');
  };
  onShow(() => {
    sheep.$store('user').updateUserData();
  });
  //登录相关
  const handleLogin = () => {
    if (!userInfo.value.mobile) {
      sheep.$router.go('/pages/index/login');
    } else {

    }
  };

  // 抽屉
  const listData = ref([
    { title: '购车订单', path: '/pages/order/list' },
    // { title: '售后订单', path: '/pages/order/aftersale/list' },
    { title: '藏品订单', path: '/pages/collect/index' },
    // { title: '传承官订单', path: '/pages/user/wallet/money' },
    // { title: '服务订单', path: '/pages/user/wallet/money' },
    { title: '账号与安全', path: '/pages/user/safe' },
    { title: '支付密码', path: '/pages/user/password' },
    { title: '实名认证', path: '/pages/user/attestation' },
    // { title: '绑定银行卡', path: '/pages/user/wallet/money' },
    { title: '服务协议', path: '/pages/user/wallet/money', 'event': 'serve' },
    { title: '意见反馈', path: '/pages/public/feedback' },
  ]);

  // 查看协议
  function onProtocol(id, title) {
    closeAuthModal();
    sheep.$router.go('/pages/public/richtext', {
      id,
      title,
    });
  }

  const state = reactive({
    shareInfo: {},
  });

  function onShareGoods() {
    state.shareInfo = $share.getShareInfo(
      {
        title: '邀好友注册 得限定款福利',
        image: sheep.$url.cdn('/uploads/20240509/5edbc1b598c8706eec8ad42b18b211f8.png'),
        desc: '扫码注册九玄数字集团APP，探索更多玩法',
        params: {
          page: '2',
          query: '555',
        },
      },
      {
        type: 'goods', // 商品海报
        title: '邀好友注册 得限定款福利', // 商品标题
        image: sheep.$url.cdn('/uploads/20240509/5edbc1b598c8706eec8ad42b18b211f8.png'), // 商品主图
        price: '0', // 商品价格
        original_price: '0', // 商品原价
      },
    );
    showShareModal();
  }

  const handleitem = (item) => {
    closeDrawer();
    if (item.event) {
      if (item.event == 'serve') {
        onProtocol(appInfo.value.user_protocol.id, appInfo.value.user_protocol.title);
      }
    } else if (item.path) {
      sheep.$router.go(item.path);
    }
  };
  const storageSize = uni.getStorageInfoSync().currentSize + 'Kb';

  const showLeft = ref(null);
  const showDrawer = () => {
    nextTick(() => {
      showLeft.value.open();
    });
  };
  const closeDrawer = () => {
    showLeft.value.close();
  };

  function onLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出账号？',
      success: async function(res) {
        closeDrawer();
        if (res.confirm) {
          closeDrawer();
          const result = await sheep.$store('user').logout();
          if (result) {
            sheep.$router.go('/pages/index/user');
          }
        }
      },
    });
  }

  const handleAll = () => {
    sheep.$router.go('/pages/user/all-car');
  };
  onPullDownRefresh(() => {
    sheep.$store('user').updateUserData();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {
  });
</script>

<style lang="scss" scoped>
  .user-wrapper {
    background-image: url("@/static/my_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 620rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .setting {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .activity-left-image {
        width: 35rpx;
        height: 35rpx;
      }
    }

    .avatar-wrapper {
      display: flex;
      margin-top: 100rpx;
      margin-bottom: 35rpx;

      .avatar {
        width: 160rpx;
        height: 160rpx;
        margin-right: 30rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .avatar-right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        color: #999999;
        font-size: 22rpx;

        .user-name {
          font-size: 36rpx;
          color: #FFFFFF;
        }

        .user-prompt {
          font-size: 26rpx;
        }

        .user-code {


          .copy {
            width: 21rpx;
            height: 21rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

    .tips {
      font-size: 24rpx;
      color: #FFFFFF;
    }

    .fans-wrapper {
      margin-top: 118rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #FFFFFF;
      font-size: 24rpx;

      .left {
        display: flex;
        .left-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          &:not(:last-child) {
            margin-right: 20rpx;
          }
        }
      }

      .right {
        display: flex;

        .edit, .share {
          border: 1px solid #FFFFFF;
          text-align: center;
          padding: 15rpx 30rpx;
          border-radius: 30rpx;
        }

        .share {
          margin-left: 30rpx;

          .share-img {
            width: 21rpx;
            height: 21rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
  }

  .queue-wrapper {
    .header-wrapper {
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      padding: 0 30rpx;
      margin-top: 60rpx;
      margin-bottom: 26rpx;

      .title {
        font-size: 34rpx;
      }

      .more {
        font-size: 26rpx;
      }
    }

    .queue-item-wrapper {
      padding: 0 30rpx;

      .queue-item {
        padding: 30rpx;
        background: #1E1E1E;
        border-radius: 20rpx;
        display: flex;

        .item-img {
          width: 140rpx;
          height: 140rpx;
          border-radius: 12rpx;
          margin-right: 30rpx;
        }

        .item-right {
          display: flex;
          justify-content: space-between;
          flex: 1;

          .content-left {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: 24rpx;
            color: #B1B1B1;

            .title {
              font-size: 30rpx;
              color: #FFFFFF;
            }

            .code-wrapper {
              display: flex;
            }

            .code {
              color: #FFFFFF;
              font-size: 22rpx;
            }
          }

          .content-right {
            font-size: 22rpx;
            color: #B1B1B1;

            .count-wrapper {
              color: #FFFFFF;
              margin-bottom: 20rpx;
              display: flex;
              align-items: center;

              .num {
                font-size: 42rpx;
                color: #007AFF;
              }
            }
          }
        }
      }
    }

    .queue-empty-wrapper {
      padding: 0 30rpx;

      .queue-empty {
        background-color: #1e1e1e;
        height: 280rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        padding: 30rpx 30rpx;

        .queue-empty-tips {
          font-size: 28rpx;
          color: #888888;
          text-align: center;
        }
      }
    }

  }

  .monney-wrapper {
    display: flex;
    padding: 0 30rpx;
    margin: 70rpx 0;

    .monney-left, .monney-right {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .monney-left {
      border-right: 2px solid #232323;
    }

    .monney-img {
      width: 72rpx;
      margin-right: 30rpx;
    }

    .monney-title {
      font-size: 28rpx;
      color: #FFFFFF;
    }

    .monney-subtitle {

      font-size: 20rpx;
      color: #767676;
    }
  }

  .collect {
    margin-top: 20rpx;

    .collect-empty {
      margin-top: -150rpx;

      .btn-wrapper {
        display: flex;
        justify-content: center;
      }
    }

    .collect-title {
      padding: 0 30rpx;
      font-size: 34rpx;
      color: #FFFFFF;
      margin-bottom: 30rpx;
    }

    .collect-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 30rpx;

      .collect-item {
        width: calc((100vw - 80rpx) / 2);
        border-radius: 20rpx;
        position: relative;
        background: #1E1E1E;
        margin-bottom: 20rpx;

        .collect-content {
          padding: 30rpx 22rpx;
        }

        .collect-img {
          width: 100%;
          height: 320rpx;
        }

        .collect-tag {
          border-radius: 10rpx;
          color: #fff;
          font-size: 20rpx;
          position: absolute;
          left: 20rpx;
          top: 20rpx;
          padding: 7rpx 11rpx;

          &.blue {
            background: linear-gradient(90deg, #477DFE, #7AB4FF);
          }

          &.green {
            background: linear-gradient(90deg, #13C093, #74E1C5);
          }
        }

        .collect-item-title {
          font-size: 32rpx;
          color: #E4E4E4;
          margin-bottom: 24rpx;
        }

        .sub-title {
          display: flex;
          font-size: 24rpx;
          color: #888888;
          align-items: center;

          .sub-img {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 15rpx;
          }
        }
      }
    }

  }

  //  抽屉
  .drawer-wrapper {
    background-color: #151515;
    padding-bottom: 50rpx;
    box-sizing: border-box;
    padding-top: 150rpx;

    .avatar-wrapper {
      display: flex;
      padding: 0 25rpx;
      margin-bottom: 35rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        margin-right: 30rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .avatar-right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .user-name {
          font-size: 36rpx;
          color: #FFFFFF;
        }

        .user-code {
          color: #999999;
          font-size: 22rpx;

        }
      }
    }

    .list-wrapper {
      padding: 0 25rpx;
      margin-bottom: 30rpx;

      .list {
        background: #212121;
        border-radius: 20rpx;

        .list-item {
          padding: 20rpx 40rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 30rpx;

          .title {
            color: #fff;
          }

          .right {
            color: #ccc;
          }
        }
      }
    }

    .btn-wrapper {
      margin-bottom: 30rpx;
      text-align: center;
      padding: 0 25rpx;
      font-size: 30rpx;
      color: #fff;

      .btn {
        border-radius: 20rpx;
        background: #212121;
        padding: 35rpx 0;
      }
    }
  }

</style>
